<template>
  <div class="page-wrap">
    <div class="logo">
      <img src="~assets/img/download_logo.png">
    </div>
    <p>乐马国际会</p>
    <a class="open" @click="open">打开乐马</a>
    <a class="down" @click="down">下载乐马</a>
    <div class="wx-layer" v-if="showWX" @click="showWX = false"></div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      isiOS: this.$tools.isIOS,
      isAndroid: this.$tools.isAndroid,
      isWx: !!navigator.userAgent.match('MicroMessenger'),
      showWX:!!navigator.userAgent.match('MicroMessenger'),
    }
  },
  computed:{
    isDesktop(){
      return !this.isiOS && this.isAndroid && !this.isWx
    }
  },
  mounted(){
    //延时调起app
    setTimeout(()=>{
      this.open();
    },800);
    document.documentElement.classList.add('download-page')
  },
  destroyed(){
    document.documentElement.classList.remove('download-page')
  },
  methods:{
    open(){
      const query = this.parseUrl(this.$route.query.refer || '')
      const { code = ''} = query;
      if (this.isiOS) {
        window.location = "lema://qr/"+code;
        setTimeout(()=>{
          this.down(true);
        },2000)
      } else {
          window.location = "lema://qr/"+code;
          setTimeout(()=>{
            this.down(true);
          },2000)
      }
    },
    down(autoDown){
      let app_down_url = ''
      if (this.isiOS) {
        if(window.DOWNLOAD_IOS){
          app_down_url = window.DOWNLOAD_IOS;
        }
      } else {
        if(window.DOWNLOAD_ANDORID){
          app_down_url = window.DOWNLOAD_ANDORID;
        }
      }
      if(app_down_url){
        window.location = app_down_url;
      }else{
        if(autoDown !== true) this.$alert('暂无下载地址')
      }
    },
    parseUrl(url){
      var rs = {};
      if(url && toString.call(url) == "[object String]"){
        url = decodeURIComponent(url);
        var queryStr = url.split('/?')
        queryStr = url.indexOf('/?') == 0 ? queryStr[1] : queryStr[0];
        var querys = queryStr.split('&');
        for(var i=0,len=querys.length;i<len;i++){
          var arr = querys[i].split('=');
          rs[arr[0]] = arr[1];
        }
      }
      return rs;
    }
  }
}
</script>
<style lang="less">
html.download-page {
  &,body {
    width: 100%;
    height:100%;
    background-color:#fff;
  }
  img,a {display:block;border:none;outline: 0}
  body {
    position: relative;
    padding:140px 50px 50px;
    background-image: url('~assets/img/download_bottom.png');
    background-position: bottom center;
    background-size:100%;
    background-repeat: no-repeat;
    &::before {
      content: '';
      position: absolute;
      top:0;
      left:0;
      right:0;
      height:604px;
      background-image: url('~assets/img/download_top.jpg');
      background-position: top left;
      background-size:100%;
      background-repeat: no-repeat;
    }
  }

  .page-wrap {
    position: relative;
    z-index:2;
    .logo {
      margin:0 auto 30px;
      width:194px;
      height: 194px;
      overflow: hidden;
      img {
        width:100%;
        height: 100%;
      }
    }
    p {
      margin:0 auto 100px;
      text-align: center;
      font-size:40px;
      color:#333;
    }
    a {
      margin:40px auto;
      width: 100%;
      height:88px;
      border-radius:5px;
      line-height: 88px;
      text-align: center;
      font-size:36px;
      color:#fff;
      background-color: #2186fa;
      &:active {
        opacity:.9;
      }
    }
  }
  .wx-layer {
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height:100%;
    background-color:rgba(0,0,0,.6);
    background-image:url('~assets/img/download_wx.png');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100%;
  }
}
</style>

